{% extends 'website/base.html' %}
{% load static %}  <!-- 注意：staticfiles 已弃用，用 static -->

{% block title %}管理后台{% endblock %}

{% block external_header %}
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/dashboard.css' %}">
    
    <!-- jQuery（仅 KindEditor 需要，否则可移除） -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    
    <!-- KindEditor（保持兼容） -->
    <script charset="utf-8" src="{% static 'kindeditor/kindeditor-all-min.js' %}"></script>
    <script charset="utf-8" src="{% static 'kindeditor/lang/zh-CN.js' %}"></script>
{% endblock %}

{% block body %}
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">后台管理</a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">主页</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <nav id="sidebar" class="col-lg-2 col-md-3 col-sm-4 bg-light sidebar py-3 px-0">
                <div class="position-sticky">
                    {% include 'website/backend/nav.html' %}
                </div>
            </nav>

            <!-- 主内容区 -->
            <main class="col-lg-10 col-md-9 col-sm-8 ms-sm-auto px-4 py-3" style="min-height: 100vh;">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-4 border-bottom">
                    <h1 class="h2">{% block option-title %}{% endblock %}</h1>
                </div>

                <div class="row g-3">
                    {% block content %}
                    {% endblock %}
                </div>
            </main>
        </div>
    </div>
{% endblock %}

{% block external_js %}
    <script>
        // 使用原生 JavaScript 设置当前菜单高亮（替代 jQuery）
        document.addEventListener("DOMContentLoaded", function () {
            const activePage = "{{ active_page }}";
            if (activePage) {
                const activeLink = document.getElementById(activePage);
                if (activeLink) {
                    // Bootstrap 5 的 active 类逻辑
                    activeLink.classList.add("active");
                    
                    // 如果是折叠菜单，展开父菜单
                    let parent = activeLink.closest('.collapse');
                    if (parent) {
                        const trigger = document.querySelector(`[data-bs-target="#${parent.id}"]`);
                        if (trigger && !trigger.classList.contains('collapsed')) {
                            trigger.classList.remove('collapsed');
                        }
                        parent.classList.add('show');
                    }
                }
            }
        });

        // 全局 KindEditor 配置（可选：在需要的页面单独初始化）
        // window.KindEditor.ready(function(K) {
        //     K.create('textarea[name="content"]', {
        //         langType: 'zh-CN',
        //         width: '100%',
        //         height: '400px'
        //     });
        // });
    </script>

    {% block js %}{% endblock %}
{% endblock %}